<template>
	<view class="doctor">
		<view class="doctor-header">
			<view class="headerbox">
				<span class='font line1' v-if="dataInfo">{{ dataInfo.name||'暂无医生' }}</span>
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view>
		<view class="doctor-content">
			<view class="item-box" v-for="(item,index) in itemList" @click="clickItem(item)">
				<view class="item-img">
					<image :src="item.icon" mode="aspectFit"></image>
					<text class="asknum" v-if="total_inquiry_unread>0 && item.id==0">{{total_inquiry_unread}}</text>
				</view>
				<view>{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		doctorInfo
	} from '@/api/doc_appointment.js';

	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(['routeError']),
		},

		components: {},
		data() {
			return {
				downStatus: false,
				dataInfo: null,
				itemList: [{
					id:0,
					title: '在线问诊',
					url: '/pages/shops/subs_doc_manager/inquiry/onlineList?doctor_id=',
					icon: HTTP_REQUEST_URL + '/uni_static/doc/doc_online.png',
				}, {
					id:1,
					title: '图文问诊',
					url: '/pages/shops/subs_doc_manager/inquiry/pictureTextList?doctor_id=',
					icon: HTTP_REQUEST_URL + '/uni_static/doc/doc_txt_img.png',
				},{
					id:2,
					title: '复诊开方',
					url: '/pages/shops/subs_doc_manager/inquiry/rp_list?doctor_id=',
					icon: HTTP_REQUEST_URL + '/uni_static/doc/dox_rx.png',
				}
				],
				total_inquiry_unread:0,
			}
		},
		onLoad: function(options) {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			this.doctorInfo();
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.total_inquiry_unread = res.data.total_inquiry_unread;
				});
			},
			doctorInfo() {
				doctorInfo().then(res => {
					this.dataInfo = res.data;
				}).catch(res => {
					this.$util.Tips({
						title: res.message
					});
				});
			},
			clickItem(item) {
				if (!this.dataInfo) {
					return this.$util.Tips({
						title: '信息错误'
					});
				}
				let url = item.url + this.dataInfo.id;
				uni.navigateTo({
					url: url,
				})

			}

		}
	}
</script>

<style scoped lang="scss">
	.doctorIcon {
		color: #F34C20;
		font-size: 80rpx;
		display: inline-block;
		margin-bottom: 29rpx;
	}

	.doctor-header {
		height: 305rpx;
		background: linear-gradient(180deg, #48D179 0%, rgba(233, 51, 35, 0) 100%);
		position: fixed;
		width: 100%;
		text-align: center;
		top: 0;
		left: 0;

		.headerbox {
			max-width: 360rpx;
			margin: 0 auto;
			position: relative;
			padding: 10rpx 0rpx 10rpx 0rpx;
			background-color: rgba(0, 0, 0, .25);
			border-radius: 30rpx;
			color: #FFFFFF;
			margin-top: 33rpx;

			display: flex;
			justify-content: center;
			align-items: center;

			.font {
				max-width: 260rpx;
				display: inline-block;
				margin-right: 6rpx;
				line-height: 28rpx;
			}

			.iconfont {
				font-size: 25rpx;
			}

			image {
				width: 34rpx;
				height: 34rpx;
				position: relative;
				top: 4rpx;
			}

			.spin {
				display: inline-block;
				transform: rotate(180deg);
				font-size: 36rpx;
			}
		}
	}

	.doctor-content {
		width: 100%;
		padding: 0 18rpx;
		margin-top: 151rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item-box {
			width: 345rpx;
			height: 270rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 5rpx 15rpx rgba(142, 82, 77, 0.1);
			border-radius: 20rpx;
			z-index: 1;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.item-img {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
				position: relative;
				.asknum{
					min-width: 15px;
					height: 15px;
					text-align: center;
					background-color: #fff;
					color: #fff;
					background-color: $yy-main-col;
					border-radius: 15rpx;
					position: absolute;
					//right: -10rpx;
					top: -10rpx;
					font-size: 10px;
					padding: 0 4px;
				}
				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>
